<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css" />
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../font/iconfont.css" />
    <link rel="stylesheet" href="../font_uiznnw8pbc/iconfont.css" />
    <link rel="stylesheet" href="../font2/iconfont.css" />
    <link rel="stylesheet" href="../css/swiper-bundle.min.css" />
    <script src="../js/api.js"></script>
    <script src="../js/Swiper.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/loadList.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
  </head>
  <body>
    <!-- header -->
    <div class="header" id="xmtop">
      <!-- 头部 的 第一行导航 site-topWrap是外部延申 -->
      <div class="site-topWrap">
        <!-- banxin  版心通用-->
        <div class="site-top banxin">
          <!-- 头部导航  左 -->
          <ul class="nav">
            <li><a href="#">小米商城</a></li>
            <li><a href="#">MIUI</a></li>
            <li><a href="#">loT</a></li>
            <li><a href="#">云服务</a></li>
            <li><a href="#">天星数科</a></li>
            <li><a href="#">有品</a></li>
            <li><a href="#">小爱开放平台</a></li>
            <li><a href="#">企业团购</a></li>
            <li><a href="#">资质证照</a></li>
            <li><a href="#">协议规则</a></li>
            <li>
              <a href="#">下载app</a>
              <div class="erweima">
                <img src="../img/download.png" alt="" />
                <p>小米商城APP</p>
              </div>
            </li>
            <li><a href="#">智能生活</a></li>
            <li><a href="#">Select Location</a></li>
          </ul>
          <!-- txt是进入购物车列表按钮 -->
          <div class="txt">
            <a href="./mycart.html">
              <p class="iconfont icon-gouwuche"></p>
              <!-- 把购物车列表里面的商品个数通过拼字符串的方式，拼到下面的p里面 -->
              <p class="txt-gouwuche">购物车(0)</p>
            </a>
            <!-- 这里可以加一个div，通过点击事件让div显示和隐藏 -->
          </div>
          <div class="topbar-info">
            <a href="./logoin.html" class="denglu" id="username">登陆</a>
            <a href="./register.html" class="zhuce">注册</a>
            <a id="delname" style="cursor: pointer">退出登陆</a>
            <a href="#">消息通知</a>
          </div>
        </div>
      </div>
      <!-- 头部 的 第二行导航 -->
      <div class="site-header">
        <div class="container banxin">
          <!-- logo图标 -->
          <div class="header-logo">
            <div class="xmlogo"></div>
          </div>
          <!-- 第二行导航内容 -->
          <ul class="header-nav">
            <li class="xiaomi_phone"><a href="#">小米手机</a></li>
            <li class="hongmi_phone"><a href="#">Radmi手机</a></li>
            <li class="tv_phone"><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">家电</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
          </ul>
          <!-- 这里是搜索栏 -->
          <div class="sousuo">
            <!-- 输入框需要加一个onchange事件，让边框变颜色，输入内容让下面显示列表 -->
            <input type="text" placeholder="手机" id="ssipt" />
            <p class="iconfont icon-sousuo"></p>
            <div class="sousuolist">
              <ul id="sslist"></ul>
            </div>
          </div>
          <!-- 侧边导航栏 -->
          <div class="cebian-nav">
            <ul class="sidebar">
              <li>
                <a href="#">手机 电话卡</a>
                <em class="iconfont icon-dajiantouyou"></em>
              </li>
              <li>
                <a href="#">电视 盒子</a>
                <em class="iconfont icon-dajiantouyou"></em>
              </li>
              <li>
                <a href="#">笔记本 显示器</a>
                <em class="iconfont icon-dajiantouyou"></em>
              </li>
              <li>
                <a href="#">家电 插线板</a>
                <em class="iconfont icon-dajiantouyou"></em>
              </li>
              <li>
                <a href="#">出行 穿戴</a>
                <em class="iconfont icon-dajiantouyou"></em>
              </li>
              <li>
                <a href="#">智能 路由器</a>
                <em class="iconfont icon-dajiantouyou"></em>
              </li>
              <li>
                <a href="#">电源 配件</a>
                <em class="iconfont icon-dajiantouyou"></em>
              </li>
              <li>
                <a href="#">健康 儿童</a>
                <em class="iconfont icon-dajiantouyou"></em>
              </li>
              <li>
                <a href="#">耳机 音箱</a>
                <em class="iconfont icon-dajiantouyou"></em>
              </li>
              <li>
                <a href="#">生活 箱包</a>
                <em class="iconfont icon-dajiantouyou"></em>
              </li>
            </ul>
          </div>
          <div class="cblist">
            <div
              class="vue2"
              style="background-color: cyan; width: 992px"
            ></div>
            <div
              class="vue2"
              style="background-color: chartreuse; width: 780px"
            ></div>
            <div class="vue2" style="background-color: rgb(255, 0, 140)"></div>
            <div class="vue2" style="background-color: rgb(201, 216, 62)"></div>
            <div class="vue2" style="background-color: rgb(0, 132, 255)"></div>
            <div class="vue2" style="background-color: rgb(153, 0, 255)"></div>
            <div
              class="vue2"
              style="background-color: rgb(152, 201, 102)"
            ></div>
            <div class="vue2" style="background-color: rgb(0, 225, 255)"></div>
            <div class="vue2" style="background-color: rgb(255, 230, 0)"></div>
            <div class="vue2" style="background-color: rgb(168, 132, 15)"></div>
          </div>
        </div>
        <!-- 第二行下的div从这里开始 -->
        <div class="header-listWrap">
          <div class="header-list banxin">
            <!-- 小米 -->
            <div id="xiaomi_phone">
              <ul>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/list-1.webp" alt="" />
                    <p class="menu_content_tit">小米11</p>
                    <p class="menu_content_price">3999元起</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/list-2.webp" alt="" />
                    <p class="menu_content_tit">小米10至尊纪念版</p>
                    <p class="menu_content_price">5299元起</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/list-3.webp" alt="" />
                    <p class="menu_content_tit">小米10</p>
                    <p class="menu_content_price">3399元起</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/list-4.webp" alt="" />
                    <p class="menu_content_tit">小米10 青春版 5G</p>
                    <p class="menu_content_price">1899元起</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/list-5.webp" alt="" />
                    <p class="menu_content_tit">小米MIX Alpha</p>
                    <p class="menu_content_price">19999元起</p>
                  </div>
                </li>
              </ul>
            </div>

            <!-- 红米 -->
            <div id="hongmi_phone">
              <ul>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/hongmi-1.webp" alt="" />
                    <p class="menu_content_tit">Redmi Note 9 系列</p>
                    <p class="menu_content_price">999元起</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/hongmi-2.webp" alt="" />
                    <p class="menu_content_tit">Redmi K30S 至尊纪念版</p>
                    <p class="menu_content_price">2599元起</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/hongmi-3.webp" alt="" />
                    <p class="menu_content_tit">Redmi K30 至尊纪念版</p>
                    <p class="menu_content_price">1999元起</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/hongmi-4.webp" alt="" />
                    <p class="menu_content_tit">Redmi 9A</p>
                    <p class="menu_content_price">599元起</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/hongmi-5.webp" alt="" />
                    <p class="menu_content_tit">Redmi K30 系列</p>
                    <p class="menu_content_price">1299元起</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/hongmi-6.webp" alt="" />
                    <p class="menu_content_tit">Redmi 10X</p>
                    <p class="menu_content_price">999元起</p>
                  </div>
                </li>
              </ul>
            </div>

            <!-- 电视 -->
            <div id="tv_phone">
              <ul>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/tv-1.webp" alt="" />
                    <p class="menu_content_tit">小米电视大师82英寸至尊纪念版</p>
                    <p class="menu_content_price">49999元</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/tv-2.webp" alt="" />
                    <p class="menu_content_tit">小米电视大师82英寸</p>
                    <p class="menu_content_price">9999元</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/tv-3.webp" alt="" />
                    <p class="menu_content_tit">小米透明电视</p>
                    <p class="menu_content_price">49999元</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/tv-4.webp" alt="" />
                    <p class="menu_content_tit">小米电视大师65英寸OLED</p>
                    <p class="menu_content_price">9999元</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/tv-5.webp" alt="" />
                    <p class="menu_content_tit">Redmi 智能电视MAX 98"</p>
                    <p class="menu_content_price">19999元</p>
                  </div>
                </li>
                <span class="menu_content_line"></span>
                <li class="xiaomiphone">
                  <div class="menu_content">
                    <img src="../img/tv-5.webp" alt="" />
                    <p class="menu_content_tit">Redmi 智能电视MAX 98"</p>
                    <p class="menu_content_price">19999元</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- lunbo -->
    <div class="home-heroWrap">
      <div class="home-hero banxin">
        <ul class="lunbo">
          <li style="opacity: 1">
            <img src="../img/lunbo7.jpg" alt="" />
          </li>
          <li>
            <img src="../img/lunbo6.jpeg" alt="" />
          </li>
          <li>
            <img src="../img/lunbo8.jpg" alt="" />
          </li>
          <li>
            <img src="../img/lunbo1.webp" alt="" />
          </li>
          <li>
            <img src="../img/lunbo2.webp" alt="" />
          </li>
        </ul>
        <div class="lunbo-button-left"></div>
        <div class="lunbo-button-right"></div>
        <div class="lunbo-botton-list">
          <a class="lunbo-button-swiper button-hover"></a>
          <a class="lunbo-button-swiper"></a>
          <a class="lunbo-button-swiper"></a>
          <a class="lunbo-button-swiper"></a>
          <a class="lunbo-button-swiper"></a>
        </div>
      </div>
    </div>
    <!-- 轮播图下面的 -->
    <div id="head_other_wrap" class="banxin">
      <!-- 左列表 -->
      <div id="head_other">
        <ul>
          <li>
            <div id="div1">
              <p class="iconfont icon-clock"></p>
              <p>小米秒杀</p>
            </div>
          </li>
          <li>
            <div id="div2">
              <p class="iconfont icon-dalou"></p>
              <p>企业团购</p>
            </div>
          </li>
          <li>
            <div id="div3">
              <p class="iconfont icon-fk"></p>
              <p>F码通道</p>
            </div>
          </li>
          <li>
            <div id="div4">
              <p class="iconfont icon-dianhuaka"></p>
              <p>米粉卡</p>
            </div>
          </li>
          <li>
            <div id="div5">
              <p class="iconfont icon-qian"></p>
              <p>以旧换新</p>
            </div>
          </li>
          <li>
            <div id="div6">
              <p class="iconfont icon-huafeichongzhi"></p>
              <p>话费充值</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 右列表 -->
      <a href="#"
        ><div class="head_other_ad">
          <img src="../img/head_other_ad-1.jpg" /></div
      ></a>
      <a href="#"
        ><div class="head_other_ad">
          <img src="../img/youlist2.jpg" /></div
      ></a>
      <a href="#"
        ><div class="head_other_ad">
          <img src="../img/youlist3.png" /></div
      ></a>
    </div>
    <!-- 小米秒杀 -->
    <div class="main-wrap">
      <div class="main">
        <div class="main-t">
          <h2>小米秒杀</h2>
          <p>
            <span class="swiper-button-prev"></span>
            <span class="swiper-button-next"></span>
          </p>
        </div>
        <div class="main-b">
          <!-- 倒计时 -->
          <div class="main-b-l">
            <h4>10:00 场</h4>
            <img
              src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAA1CAYAAAAklDnhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
                bWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
                bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
                eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1
                MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
                dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
                dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
                IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
                ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
                cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5j
                ZUlEPSJ4bXAuaWlkOjY4Q0ZFMkY5MTJFNzExRThCMkM4OEM1RTNBNjczQUVBIiB4bXBNTTpEb2N1
                bWVudElEPSJ4bXAuZGlkOjY4Q0ZFMkZBMTJFNzExRThCMkM4OEM1RTNBNjczQUVBIj4gPHhtcE1N
                OkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDRkUyRjcxMkU3MTFFOEIy
                Qzg4QzVFM0E2NzNBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjhDRkUyRjgxMkU3MTFF
                OEIyQzg4QzVFM0E2NzNBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94Onht
                cG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5oEyacAAACoklEQVR42sSYv0tbURTHX0LqD6T4g4pE
                cHDoUOloBxVd/QFFEcQqWtrSKlKFmmAslopohzgIbv4FwUEE0clFujiIi+BSIbRQ0ooKRReRULHf
                S48Qgu++c3/FAx+iyU3eJzf3nnPuC/1qavQ04zVY8szjCHRGNN9cBD6DSkOJKzAGzsOaH/AW1FuY
                jRg4EH/oiJSCTxYk1sDK7T86Iu9BraHED/Au9wlVkYdg2lAiC/rBhYnIB/DIUOQj2M9/UkWkCsQN
                JbbA8l0vqIhMgXIDiZ/gFbgxEakBEwYSf8Eg+OM3gCsyA8oMRETy25UN4IjUgVEDiW2wGDSIIzIL
                ijUljsFLv3WhIvKYFphOXNO6OOUMDhKZA7qFcQF85Q6WXeQpeKEpcULlvY8xthp8iwR8I93qLLb7
                KnOsSPWNfhd6Bro99yHqTi9IhyWzEXIsIXbSG7Djt1jbQHsBZkMkyZRs13wpgIRoiJKy7dsBWh1L
                bN5Vt3JFQrQ2XMYeGKBk5yvSI7aRQ4k0eA4uZZlVPM47lDgTZxd6lKb4AcqkLuKSZiIdVGsiVFNc
                xDV9yT1Orekjoe+MDw4pHqwmaJewit66Ql0QaX+DOTaZe4DitAFZxQaaEynKnJ6KCDeaQAtj3A7V
                kBtXIpwT3iFV06zqquaKPKEtKIsM6Mo/StoWiQeMvSCJjO4+54hEwTCjuTk0STgckUm6QxTY3LgU
                Kc+/jyFrblyKCIkKbnPjSkT8HDGV5saVyBAtVHZz40Ik7HNTRtrcuBARF2tQbW5ciCR0mhvbIs2E
                cnNjWySh29zYFGnIK25KzY1Nkdziptzc2BKJUu7Qbm5sicQom2o3NzZEKqiu/DZpbmyIjIAHNBMZ
                7x4iTALjhcgVQSIl3v87w5vePcY/AQYAFYR6skFSqBUAAAAASUVORK5CYII="
              alt=""
            />
            <p>据结束还有</p>
            <div class="spandjs">
              <span>00</span><i>:</i><span>00</span><em>:</em>
              <span>00</span>
            </div>
          </div>
          <!-- 右轮播 -->
          <div class="main-b-r">
            <!-- Swiper -->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  style="border-top: 1px solid greenyellow"
                >
                  <img src="../img/sb.webp" alt="" />
                  <h3>小米鼠标</h3>
                  <p>流畅、朴素、实用</p>
                  <p>
                    <span>38元</span>
                    <del>45元</del>
                  </p>
                </div>
                <div class="swiper-slide" style="border-top: 1px solid red">
                  <img src="../img/bjb1.webp" alt="" />
                  <h3>小米笔记本</h3>
                  <p>流畅、高效、实用、大气</p>
                  <p>
                    <span>3999元</span>
                    <del>4500元</del>
                  </p>
                </div>
                <div class="swiper-slide" style="border-top: 1px solid yellow">
                  <img src="../img/zhi.webp" alt="" />
                  <h3>日常元素抽纸 青春版 24包</h3>
                  <p>精选原生竹浆，健康环保</p>
                  <p>
                    <span>25.9元</span>
                    <del>32.9元</del>
                  </p>
                </div>
                <div class="swiper-slide" style="border-top: 1px solid black">
                  <img src="../img/bjb2.webp" alt="" />
                  <h3>RedmiBook Pro 15 512G 黑</h3>
                  <p>3.2K 超清视网膜全面屏 | 微米级一体精雕工艺</p>
                  <p>
                    <span>4799元</span>
                    <del>4999元</del>
                  </p>
                </div>
                <div class="swiper-slide" style="border-top: 1px solid red">
                  <img src="../img/csj.webp" alt="" />
                  <h3>NEW WIDETECH 除湿机</h3>
                  <p>智能操控，快速除湿</p>
                  <p>
                    <span>1059元</span>
                    <del>1299元</del>
                  </p>
                </div>
                <div class="swiper-slide" style="border-top: 1px solid blue">
                  <img src="../img/xyj.webp" alt="" />
                  <h3>HITH智能洗衣机</h3>
                  <p>便捷移动排水，安全漏电保护</p>
                  <p>
                    <span>1799元</span>
                    <del>1999元</del>
                  </p>
                </div>
                <div class="swiper-slide" style="border-top: 1px solid black">
                  <img src="../img/bjb2.webp" alt="" />
                  <h3>RedmiBook Pro 锐炬X</h3>
                  <p>3.2K 90Hz 超清视网膜全面屏 | 微米级一体精雕工艺</p>
                  <p>
                    <span>4849元</span>
                    <del>4999元</del>
                  </p>
                </div>
                <div class="swiper-slide" style="border-top: 1px solid red">
                  <img src="../img/csj2.webp" alt="" />
                  <h3>NEW WIDETECH 除湿机</h3>
                  <p>米家app联动，智能操控</p>
                  <p>
                    <span>1099元</span>
                    <del>1299元</del>
                  </p>
                </div>
                <div class="swiper-slide" style="border-top: 1px solid yellow">
                  <img src="../img/mz.webp" alt="" />
                  <h3>小米帽子</h3>
                  <p>朴素、实用</p>
                  <p>
                    <span>28元</span>
                    <del>35元</del>
                  </p>
                </div>
                <div class="swiper-slide" style="border-top: 1px solid blue">
                  <img src="../img/bjb4.webp" alt="" />
                  <h3>RedmiBook Pro 14 R7 黑</h3>
                  <p>一体精雕工艺 | 轻薄本 | 智能互联</p>
                  <p>
                    <span>4699元</span>
                    <del>4999元</del>
                  </p>
                </div>
              </div>
            </div>
            <div class="swiper-pagination"></div>
            <script>
              var swiper = new Swiper(".swiper-container", {
                autoplay: {
                  delay: 3000,
                  stopOnLastSlide: false,
                  disableOnInteraction: false,
                }, //自动切换，3秒一次
                slidesPerView: 4, //每次循环4个
                slidesPerGroup: 4, //4个为一组
                spaceBetween: 30, //间隔为30px
                pagination: {
                  //分页器
                  el: ".swiper-pagination",
                  clickable: true,
                },
                navigation: {
                  //左右切换
                  nextEl: ".swiper-button-next",
                  prevEl: ".swiper-button-prev",
                },
              });
            </script>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间图 第一张 -->
    <div class="homebanner">
      <img src="../img/homebanner.jpg" class="banxin" alt="" />
    </div>
    <!-- 手机商品列表 -->
    <div id="main_show">
      <div class="floor banxin">
        <div class="floor_head">
          <h2>手机</h2>
        </div>
        <div class="floor_goods clean">
          <div class="floor_goods_da">
            <a><img src="../img/mian-0.webp" class="main-0" /></a>
          </div>
          <div class="floor-goods-listWrap">
            <ul class="floor_goods_list">
              <!-- <li class="floor_goods_list_li">
                              <a href="">
                                  <div class="pimg">
                                      <img src="" width="160" height="160">
                                  </div>
                                  <h3 class="pname"></h3>
                                  <p class="pdesc"></p>
                                  <p class="pprice"></p>
                              </a>
                          </li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间图 第二张 -->
    <div class="homebanner">
      <img src="../img/homebanner2.jpg" class="banxin" alt="" />
    </div>
    <!-- 家电商品列表 -->
    <div id="main_show">
      <div class="floor banxin">
        <div class="floor_head">
          <h2>家电</h2>
        </div>
        <div class="floor_goods clean">
          <div class="floor_goods_da">
            <a
              ><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/116fc43816b87192be4e67cf762e8da5.jpeg?thumb=1&w=234&h=300&f=webp&q=90"
                class="main-0"
                style="height: 300px"
            /></a>
            <a>
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dfbdabe36b2d630d57a015e6fb5eb3ea.jpg?thumb=1&w=234&h=300&f=webp&q=90"
                class="main-0"
                style="height: 300px; margin-top: 14px"
              />
            </a>
          </div>
          <div class="floor-goods-listWrap">
            <ul class="floor_goods_list2">
              <!-- <li class="floor_goods_list_li">
                  <a href="">
                    <div class="pimg">
                      <img
                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                        width="160"
                        height="160"
                      />
                    </div>
                    <h3 class="pname"></h3>
                    <p class="pdesc"></p>
                    <p class="pprice"></p>
                  </a>
                </li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间图 第三张 -->
    <div class="homebanner">
      <img src="../img/homebanner3.jpg" class="banxin" alt="" />
    </div>
    <!-- 智能商品列表 -->
    <div id="main_show">
      <div class="floor banxin">
        <div class="floor_head">
          <h2>智能</h2>
        </div>
        <div class="floor_goods clean">
          <div class="floor_goods_da">
            <a
              ><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ffe114f73fac3a45e5622c3eff56106b.jpg?thumb=1&w=234&h=300&f=webp&q=90"
                class="main-0"
                style="height: 300px"
            /></a>
            <a>
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a660ce095e8f553a9ed1515265f4e9fc.jpg?thumb=1&w=234&h=300&f=webp&q=90"
                class="main-0"
                style="height: 300px; margin-top: 14px"
              />
            </a>
          </div>
          <div class="floor-goods-listWrap">
            <ul class="floor_goods_list2">
              <!-- <li class="floor_goods_list_li">
              <a href="">
                <div class="pimg">
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                    width="160"
                    height="160"
                  />
                </div>
                <h3 class="pname"></h3>
                <p class="pdesc"></p>
                <p class="pprice"></p>
              </a>
            </li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间图 第四张 -->
    <div class="homebanner">
      <img src="../img/homebanner4.jpg" class="banxin" alt="" />
    </div>
    <!-- 搭配商品列表 -->
    <div id="main_show">
      <div class="floor banxin">
        <div class="floor_head">
          <h2>搭配</h2>
        </div>
        <div class="floor_goods clean">
          <div class="floor_goods_da">
            <a
              ><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6874615b3c50e837ffe532eb6ea4ef1a.jpg?thumb=1&w=234&h=300&f=webp&q=90"
                class="main-0"
                style="height: 300px"
            /></a>
            <a>
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f6c89cf21efc23799f6130224cef007.jpg?thumb=1&w=234&h=300&f=webp&q=90"
                class="main-0"
                style="height: 300px; margin-top: 14px"
              />
            </a>
          </div>
          <div class="floor-goods-listWrap">
            <ul class="floor_goods_list2">
              <!-- <li class="floor_goods_list_li">
              <a href="">
                <div class="pimg">
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                    width="160"
                    height="160"
                  />
                </div>
                <h3 class="pname"></h3>
                <p class="pdesc"></p>
                <p class="pprice"></p>
              </a>
            </li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间图 第五张 -->
    <div class="homebanner">
      <img src="../img/homebanner5.jpg" class="banxin" alt="" />
    </div>
    <!-- 配件商品列表 -->
    <div id="main_show">
      <div class="floor banxin">
        <div class="floor_head">
          <h2>配件</h2>
        </div>
        <div class="floor_goods clean">
          <div class="floor_goods_da">
            <a
              ><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f64bbd58c3f5001bdf0688894f22cb6.jpg?thumb=1&w=234&h=300&f=webp&q=90"
                class="main-0"
                style="height: 300px"
            /></a>
            <a>
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ffe4182f1d9a5befdf2380ec90ae1620.jpg?thumb=1&w=234&h=300&f=webp&q=90"
                class="main-0"
                style="height: 300px; margin-top: 14px"
              />
            </a>
          </div>
          <div class="floor-goods-listWrap">
            <ul class="floor_goods_list2">
              <!-- <li class="floor_goods_list_li">
              <a href="">
                <div class="pimg">
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                    width="160"
                    height="160"
                  />
                </div>
                <h3 class="pname"></h3>
                <p class="pdesc"></p>
                <p class="pprice"></p>
              </a>
            </li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间图 第六张 -->
    <div class="homebanner">
      <img src="../img/homebanner6.jpg" class="banxin" alt="" />
    </div>
    <!-- 周边商品列表 -->
    <div id="main_show">
      <div class="floor banxin">
        <div class="floor_head">
          <h2>周边</h2>
        </div>
        <div class="floor_goods clean">
          <div class="floor_goods_da">
            <a
              ><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ca0940f052227d235e7de5678d106c89.jpg?thumb=1&w=234&h=300&f=webp&q=90"
                class="main-0"
                style="height: 300px"
            /></a>
            <a>
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0497ba8520dc4aca9d55e6b841d42331.jpg?thumb=1&w=234&h=300&f=webp&q=90"
                class="main-0"
                style="height: 300px; margin-top: 14px"
              />
            </a>
          </div>
          <div class="floor-goods-listWrap">
            <ul class="floor_goods_list2">
              <!-- <li class="floor_goods_list_li">
              <a href="">
                <div class="pimg">
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                    width="160"
                    height="160"
                  />
                </div>
                <h3 class="pname"></h3>
                <p class="pdesc"></p>
                <p class="pprice"></p>
              </a>
            </li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间图 第七张 -->
    <div class="homebanner">
      <img src="../img/homebanner7.jpg" class="banxin" alt="" />
    </div>
    <!-- 视频商品列表 -->
    <div id="main_show">
      <div class="floor banxin">
        <div class="floor_head">
          <h2>视频</h2>
        </div>
        <div class="box-sp banxin clean">
          <ul class="video clean">
            <li class="video-li">
              <a href="javascript:viod(0)">
                <div class="imgdiv">
                  <img src="../img/sp1.jpg" alt="" />
                </div>
                <h3>2021年春季新品发布会第一场</h3>
              </a>
            </li>
            <li class="video-li">
              <a href="javascript:viod(0)">
                <div class="imgdiv">
                  <img src="../img/sp2.jpg" alt="" />
                </div>
                <h3>Redmi 10X系列发布会</h3>
              </a>
            </li>
            <li class="video-li">
              <a href="javascript:viod(0)">
                <div class="imgdiv">
                  <img src="../img/sp3.jpg" alt="" />
                </div>
                <h3>小米10 青春版 发布会</h3>
              </a>
            </li>
            <li class="video-li">
              <a href="javascript:viod(0)">
                <div class="imgdiv">
                  <img src="../img/sp4.jpg" alt="" />
                </div>
                <h3>小米10 8K手机拍大片</h3>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div id="foot_box" class="banxin">
      <div id="foot_wrap" class="banxin">
        <div class="foot_top">
          <ul>
            <li><span class="iconfont icon-weixiu"></span> 预约维修服务</li>
            <li class="font_top_i">|</li>
            <li><span class="iconfont icon-7day"></span> 7天无理由退货</li>
            <li class="font_top_i">|</li>
            <li><span class="iconfont icon-15"></span> 15天免费换货</li>
            <li class="font_top_i">|</li>
            <li><span class="iconfont icon-liwu"></span> 满69元包邮</li>
            <li class="font_top_i">|</li>
            <li><span class="iconfont icon-didian"></span> 520余家售后网点</li>
          </ul>
        </div>
        <div class="foot_bottom">
          <div class="foot_bottom_l">
            <dl>
              <dt>帮助中心</dt>
              <dd>账户管理</dd>
              <dd>购物指南</dd>
              <dd>订单操作</dd>
            </dl>
            <dl>
              <dt>服务支持</dt>
              <dd>售后政策</dd>
              <dd>自助服务</dd>
              <dd>相关下载</dd>
            </dl>
            <dl>
              <dt>线下门店</dt>
              <dd>小米之家</dd>
              <dd>服务网点</dd>
              <dd>授权体验店</dd>
            </dl>
            <dl>
              <dt>关于小米</dt>
              <dd>了解小米</dd>
              <dd>加入小米</dd>
              <dd>投资者关系</dd>
              <dd>企业社会责任</dd>
              <dd>廉洁举报</dd>
            </dl>
            <dl>
              <dt>关注我们</dt>
              <dd>新浪微博</dd>
              <dd>官方微信</dd>
              <dd>联系我们</dd>
              <dd>公益基金会</dd>
            </dl>
            <dl>
              <dt>特色服务</dt>
              <dd>F码通道</dd>
              <dd>礼物码</dd>
              <dd>防伪查询</dd>
            </dl>
            <div class="foot_bottom_r">
              <a>400-100-5678</a>
              <a>周一至周日 8:00-18:00</a>
              <a>（仅收市话费）</a>
              <span> 24小时在线客服</span>
            </div>
          </div>
        </div>
      </div>
      <div class="foot_note_box">
        <div class="foot_note_wrap">
          <div class="foot_note_con">
            <span class="foot_logo">
              <img src="../img/logo-mi2.png" width="60px" height="60px" />
            </span>
            <span class="foot_note_txt">
              <a>小米商城</a>
              <h>|</h><a>MIUI</a><h>|</h><a>米家</a><h>|</h><a>米聊</a> <h>|</h
              ><a>多看</a><h>|</h><a>游戏</a><h>|</h><a>政企服务</a> <h>|</h
              ><a>小米天猫店</a><h>|</h><a>小米集团隐私政策</a> <h>|</h
              ><a>问题反馈</a><h>|</h><a>小米公司儿童信息保护规则</a> <h>|</h
              ><a>小米天猫店</a><h>|</h><a>小米集团隐私政策</a> <h>|</h
              ><a>小米公司儿童信息保护规则</a> <h>|</h><a>小米商城隐私政策</a
              ><h>|</h><a>小米商城用户协议</a> <h>|</h><a>问题反馈</a><h>|</h
              ><a>Select Location</a><h>|</h><a>北京互联网法院法律服务工作站</a
              ><h>|</h><a>中国消费者协会</a><h>|</h><a>北京市消费者协会</a>
            </span>
          </div>
        </div>
        <div class="butimg">
          <img src="../img/but1.png" />
          <img src="../img/but2.png" />
          <img src="../img/but3.png" />
          <img src="../img/but4.png" />
          <img src="../img/but5.png" />
        </div>
        <div class="xmlx"></div>
      </div>
    </div>
    <!-- 固定定位导航栏 -->
    <div class="dhl">
      <ul>
        <a href="#main_show"><span class="iconfont icon-shouji"></span></a>
        <a><span class="iconfont icon-ren"></span></a>
        <a><span class="iconfont icon-weixiu1"></span></a>
        <a><span class="iconfont icon-erji"></span></a>
        <a href="./mycart.html"><span class="iconfont icon-gouwuche"></span></a>
        <a href="#xmtop" style="margin-top: 20px"
          ><span class="iconfont icon-shang"></span
        ></a>
      </ul>
    </div>
    <script src="../js/index.js"></script>
  </body>
</html>
